<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ext JS 与 Struts</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/group/js/ext/resources/css/ext-all.css" />
 <STYLE TYPE="text/css">
	.add { background-image: url(images/add.gif) !important; }
	.option {	background-image: url(images/plugin.gif) !important; }
	.remove {	background-image: url(images/delete.gif) !important; }
  </STYLE>
<script type="text/javascript" src="/group/js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/group/js/ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = '/group/js/ext/resources/images/default/s.gif';
	//定义数据集对象
	/**
	var store = new Ext.data.Store({//配置分组数据集
		autoLoad :true,
		reader: new Ext.data.XmlReader({
			totalRecords : "results",
			record : "Person",
			fields : [
				{id:'id'},
				{name: 'name'},
				{name: 'age'},
				{name: 'sex'},
				{name: 'birthday'},
				{name: 'address'}
			]
		}),
		proxy : new Ext.data.HttpProxy({
			url : 'extjsXml.shtml'
		})
	})
*/
  	//定义数据集对象
	var store = new Ext.data.Store({//配置分组数据集
		//autoLoad :true,
		autoLoad:{params:{start:0,limit:3}},//默认加载参数：start=0，limit=6
		reader: new Ext.data.JsonReader({
			//totalRecords : "results",
			 totalProperty:"results",
			root : "items",//和action的list的名称一致。
			fields : [
				{name:'personid'},
				{name: 'name'},
				{name: 'age'},
				{name: 'sex'},
				{name: 'birthday'},
				{name: 'address'}
			]
		}),
		proxy : new Ext.data.HttpProxy({
			url : 'extjs.shtml'
		})
	})
	var toolbar = new Ext.Toolbar([
		{text:'新增人员',iconCls:'add',handler:showAdd},
		{text:'修改人员',iconCls:'option'},
		{text:'删除人员',iconCls:'remove'}
	]);
	var pagingBar = new Ext.PagingToolbar({//分页工具栏
              store:store,
              pageSize:3,//每页显示的条数。用于系统自动计算它的start值
              displayInfo:true,
              displayMsg:'第{0}条 到第{1}条, 共 {2}条数据',
              emptyMsg:"没有记录"
           });
	
	var cb = new Ext.grid.CheckboxSelectionModel();//创建选择模式对象
	//创建Grid表格组件
	var grid = new Ext.grid.GridPanel({
		title : '人员列表',
		applyTo : 'grid-div',
		frame:true,		
		height:500,
		tbar:toolbar,
		loadMask: true, 
		store: store,//设置表格对应的数据集
		stripeRows:true,//显示斑马线
		autoScroll:true,//当数据超出表格高度时，自动显示滚动条
		viewConfig:{
			autoFill:true //自动填充表格
		},
		sm:cb,//设置表格的选择模式
		
		columns: [//配置表格列
			new Ext.grid.RowNumberer({
				header:'序号',
				width:40
			}),//表格行号组件
			cb,//在表中显示复选择框
			{header: "id",  width: 80,  dataIndex: 'personid', sortable: true},
			{header: "姓名", width: 80, dataIndex: 'name', sortable: true},
			{header: "年龄", width: 80, dataIndex: 'age', sortable: true},
			{header: "性别", width: 80, dataIndex: 'sex', sortable: true},
			{header: "生日", width: 80, dataIndex: 'birthday', sortable: true},
			{header: "地址", width: 80, dataIndex: 'address', sortable: true}
		],
		//分页工具栏
         bbar: pagingBar//分页引用，作为button。前面有定义
	});
//	store.load({ params: { start: 0, limit: 3} }); 

	//创建新增或修改书籍信息的form表单
		Ext.QuickTips.init();
		
	var win = new Ext.Window({
			layout:'fit',
		    width:380,
		    closeAction:'hide',
		    height:280,
			resizable : false,
			shadow : true,
			modal :true,
		    closable:true,
		    bodyStyle:'padding:5 5 5 5',
		    animCollapse:true
		});
function showAdd(){
		win.setTitle("新增人员");
			win.show();
}
});


</script>
</head>
<BODY style="margin=10 10 10 10;">
<div id='grid-div'></div>
</BODY>
</html>